import React, { Component, useState } from "react";
import "./settingColorHSL1.less";
import PubSub from 'pubsub-js'
import { meshLog ,SPRemove,SPGet,SPSet } from "../../../config";
import rgb_inner from '../../../static/touch/rgb_inner.png'
import { SetHSLdate } from '../../../utils/adminUtils';
class SettingColorHSL1 extends Component {
  componentDidMount() {
    //meshLog(addr);
    let eBarWrap = document.getElementById('hsl1');
    //获取滑动条
    let eBarCon = eBarWrap.getElementsByClassName('kuang')[0];
    //获取滑动痕迹元素
    // let eBarInto = eBarWrap.getElementsByClassName('guiji')[0];
    //获取滑块
    let eBarDrag = eBarWrap.getElementsByClassName('hslkuai')[0];
    //获取文本元素
    // let eBarText = eBarWrap.getElementsByClassName('bar_text')[0];
    //获取最大位置
    let nMax = eBarCon.offsetWidth - eBarDrag.offsetWidth;
    let hslwenzi = eBarWrap.getElementsByClassName('hslwenzi')[0];
    //修改默认数值放到下面hsl1操作了(这边也可以不要)
    let hslh = parseFloat(SPGet("hslh"))
    hslwenzi.value = Math.ceil(hslh * 359);
    eBarDrag.style.left = Math.round((hslh * 359) / (359) * nMax) + 'px';
    // meshLog(eBarInto.style.width);
    let chakuai = ''
    //滑块添加拖拽事件
    eBarDrag.addEventListener('mousedown', function (event) {
      //初始化鼠标开始拖拽的点击位置
      let nInitX = event.clientX;
      //初始化滑块位置
      let nInitLeft = this.offsetLeft;
      //页面绑定鼠标移动事件
      document.onmousemove = event => {
        //鼠标移动时取消默认行为，避免选中其他元素或文字
        event.preventDefault();
        //获取鼠标移动后滑块应该移动到的位置
        let nX = event.clientX - nInitX + nInitLeft;
        //限制滑块最大移动位置
        if (nX >= nMax) {
          nX = nMax;
        }
        //限制滑块最小移动位置
        if (nX <= 0) {
          nX = 0;
        }
        //修改滑块位置（因为用的是箭头函数，所以this还是指向滑块）
        this.style.left = nX + 'px';
        //修改滑动痕迹宽度
        // eBarInto.style.width = nX + this.offsetWidth / 2 + 'px';
        //修改文本数值eBarText.innerHTML = Math.ceil(nX / nMax * 100) / 10;
        hslwenzi.value = (Math.ceil(nX / nMax * 359));
        chakuai = nX / nMax
      };
      //鼠标松开绑定事件，取消页面上所有事件
      document.onmouseup = async function (event) {
        document.onmousemove = null;
        document.onmouseup = null;
        meshLog("SettingColorHSL1.js,60行,滑动最终的值", hslwenzi.value);
        hslh = chakuai
        let hsls = parseFloat(SPGet("hsls"))
        let hsll = parseFloat(SPGet("hsll"))
        SPSet('hslh', JSON.stringify(hslh))//存到localStorage
        SetHSLdate(hslh, hsls, hsll)
        //反馈给rgb页面（hsl转RGB，RGB转hsv都放在RGB页面）
        PubSub.publish('RGB', 1)
        setTimeout(() => {
          PubSub.publish('RGBtiaobackColor', 1)//控制settingColorRGBtiao的背景颜色
        }, 500)
      }
    });
    //滑动条添加点击事件
    eBarCon.addEventListener('click', async function (event) {
      //设置滑动条位置
      let nLeft = this.offsetLeft;
      //获取有定位的父元素
      let eParent = this.offsetParent;
      //循环所有有定位的父元素
      while (eParent) {
        //添加定位父元素offsetLeft值，用于准确定位滑动条与页面左侧的距离
        nLeft += eParent.offsetLeft;
        //再次获取父元素外的定位父元素
        eParent = eParent.offsetParent;
      }
      //计算滑块位置
      let nX = event.clientX - nLeft;
      //修改滑块位置
      if (nX >= nMax) {
        nX = nMax;
      }
      //限制滑块最小移动位置
      if (nX <= 0) {
        nX = 1;
      }
      eBarDrag.style.left = nX + 'px';
      //修改滑动痕迹宽度
      // eBarInto.style.width = nX + eBarDrag.offsetWidth / 2 + 'px';
      //修改文本数值eBarText.innerHTML = Math.ceil(nX / nMax * 100) / 10
      hslwenzi.value = (Math.ceil(nX / nMax * 359));
      meshLog("SettingColorHSL1.js,60行,点击的最终值", hslwenzi.value)
      hslh = nX / nMax
      let hsls = parseFloat(SPGet("hsls"))
      let hsll = parseFloat(SPGet("hsll"))
      SPSet('hslh', JSON.stringify(hslh))//存到localStorage
      SetHSLdate(hslh, hsls, hsll)
      //反馈给rgb页面（hsl转RGB，RGB转hsv都放在RGB页面）
      PubSub.publish('RGB', 1)
      setTimeout(() => {
        PubSub.publish('RGBtiaobackColor', 1)//控制settingColorRGBtiao的背景颜色
      }, 500)
    });
    //RGB页面的反馈和初始化的值都可以在这里操作
    PubSub.unsubscribe("HSL1")
    PubSub.subscribe('HSL1', (msg, data) => {
      //meshLog('HSL1');
      let hslh = parseFloat(SPGet("hslh"))
      hslwenzi.value = Math.ceil(hslh * 359);
      eBarDrag.style.left = Math.round((hslh * 359) / (359) * nMax) + 'px';
    });
  }
  hsl1wenziCheck = async (object) => {
    if (object.target.value > 359) {
      object.target.value = 359
    } else {
      if (object.target.value <= 0) {
        object.target.value = 1
      } else {
        object.target.value = object.target.value
      }
    }
    //meshLog('hsl1wenziCheck', object.target.value);
    let eBarWrap = document.getElementById('hsl1');
    let eBarCon = eBarWrap.getElementsByClassName('kuang')[0];
    //获取滑块
    let eBarDrag = eBarWrap.getElementsByClassName('hslkuai')[0];
    //获取最大位置
    let nMax = eBarCon.offsetWidth - eBarDrag.offsetWidth;
    let nX = (object.target.value / 359) * nMax
    eBarDrag.style.left = nX + 'px';
    let hslh = nX / nMax
    let hsls = parseFloat(SPGet("hsls"))
    let hsll = parseFloat(SPGet("hsll"))
    SPSet('hslh', JSON.stringify(hslh))//存到localStorage
    SetHSLdate(hslh, hsls, hsll)
    //反馈给rgb页面（hsl转RGB，RGB转hsv都放在RGB页面）
    PubSub.publish('RGB', 1)
    setTimeout(() => {
      PubSub.publish('RGBtiaobackColor', 1)//控制settingColorRGBtiao的背景颜色
    }, 500)
  }
  render() {
    return (
      <div style={{ float: "left", marginLeft: 170 }}>
        <div className="hsl" id='hsl1'>
          <input style={{ color: '#000000', marginTop: -10 }} onInput={this.hsl1wenziCheck} type="number" className="hslwenzi"  ></input>
          <img className="hsltiao" src={rgb_inner} style={{ marginTop: -32 }} />
          <div className="kuang" style={{ marginTop: -14, marginLeft: -113 }}    >
          </div>
          <div className="hslkuai"   >
          </div>
        </div>
      </div >
    );
  }
};
export default SettingColorHSL1;
